<template>
    <div class="zh-table recording-management">
        <div class="zh-table-open clear">
            <div class="zh-open-left fl">
                <div class="open-width" style="width: 270px">
                    <el-input v-model="input" placeholder="请输入设备名搜索"></el-input>
                </div>
                <el-button type="primary">搜索</el-button>
            </div>
            <div class="zh-open-right fr">
                <el-button type="primary" @click="">一键录制</el-button>
                <el-button type="primary" @click="">一键停止</el-button>
                <el-button type="primary" @click="">一键暂停</el-button>
            </div>
        </div>
        <div class="zh-table-contents">
            <el-table
                :data="tableData"
                border
                max-height="600"
                style="width: 100%">
                <el-table-column
                    type="selection"
                    width="50"
                    align="center"
                    fixed>
                </el-table-column>
                <el-table-column
                    prop="1"
                    label="录制视频名称"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop="2"
                    label="关联设备"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop="3"
                    label="录制时长（单位：分钟）"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop="4"
                    label="输出格式"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop="4"
                    label="录制状态"
                    align="center"
                    show-overflow-tooltip
                    >
                </el-table-column>
                <el-table-column
                    prop="5"
                    label="操作"
                    align="center"
                    width="100"
                    show-overflow-tooltip
                    >
                    <template slot-scope="scope">
                        <!-- <el-button @click="" type="text">预览</el-button>
                        <el-button @click="" type="text" class="delete-button">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="table-pagination" v-if="total > 10">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="page"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
                <div class="pagination-button">
                    <el-button 
                        @click=""
                        type="primary" icon="el-icon-refresh" 
                        circle title="刷新数据" size="mini" >
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                options: [{
                    value: '0',
                    label: '全部'
                }, {
                    value: '1',
                    label: '进行中'
                }, {
                    value: '2',
                    label: '已结束'
                }],
                value: '0',
                input: '',
                tableData: [{
                    1: '煞笔',
                    2: '王小虎',
                    3: '上海',
                    4: '普陀区',
                    5: '2016-05-03'
                }],
                currentPage: 4,// 当前第几页
                total: 0,//共几条
                page: 10,// 条/页数据
            }
        },
        created(){
            
        },
        watch:{
            
        },
        methods: {
            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
            }
        },
    }
</script>